<template>
  <!--大屏主体内容-->
  <div class="__main mt12">
    <div class="_box __left">
      <div class="bigTit"><span>教师工资支出情况</span></div>
      <div class="_body">
        <itemLeftTop />
        <div class="divider mt12"></div>
        <itemLeftBottom class="mt24"/>
      </div>
    </div>
    <div class="__center">
      <itemCenterTop/>
      <itemCenterB1 class="mt20"/>
      <itemCenterB2 class="mt24"/>
      <itemCenterB3 class="mt24"/>
    </div>
    <div class="_box __right">
      <div class="bigTit"><span>食堂支出情况</span></div>
      <div class="_body">
        <itemRightTop />
        <div class="divider mt12"></div>
        <itemRightBottom class="mt24"/>
      </div>
    </div>
  </div>
  <!--大屏主体内容-->
</template>

<script>
  import pageTitle from '../components/pageTitle'
  import itemBox from '../components/itemBox'
  import countTo from 'vue-count-to'

  import itemLeftTop from './itemLeftTop'
  import itemLeftBottom from './itemLeftBottom'
  import itemCenterTop from './itemCenterTop'
  import itemCenterB1 from './itemCenterB1'
  import itemCenterB2 from './itemCenterB2'
  import itemCenterB3 from './itemCenterB3'
  import itemRightTop from './itemRightTop'
  import itemRightBottom from './itemRightBottom'

  export default {
    name: 'index',
    components: {
      pageTitle, itemBox, countTo,
      itemLeftTop, itemLeftBottom,
      itemCenterTop, itemCenterB1, itemCenterB2, itemCenterB3,
      itemRightTop, itemRightBottom
    },
    data() {
      return {
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style scoped lang="scss">
  .mt12 { margin-top: 12px;}
  .mt20 { margin-top: 20px;}
  .mt24 { margin-top: 24px;}
  .divider {
    width: 100%; height: 4px;
    background: url('~@/assets/imgSchoolHouse/divider_s.svg') no-repeat;
  }
  .__main {
    padding: 0 24px 24px;
    display: grid; grid-template-columns: 470px auto 470px;
    grid-gap: 22px;
    ._box {
      background: rgba(0,16,43,0.32); border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
      overflow: hidden;
      .bigTit {
        height: 42px; font-size: 24px; font-family: PingFangSC; font-weight: bold; letter-spacing: 1.96px;
        background: url('~@/assets/img/boxBg.svg') -1px top no-repeat;
        display: flex; align-items: center;
        span { margin-left: 40px;}
      }
    }
    ._body {
      padding: 15px;
      ._card {
        background: rgba(0,16,43,0.32); border: 1px solid rgba(8,132,255, .6); border-radius: 5px;
        padding: 15px; font-family: PingFangSC;
        display: flex; align-items: center; justify-content: center;
        .item {
          width: 50%; text-align: center;
          .val { font-size: 30px;  color: #00FFFA; font-family: DINPro; }
          .unit { font-size: 14px;}
          .label { font-size: 16px;}
          & + .item {
            position: relative;
            &:before {
              content: ''; display: block; width: 1px; height: 50%; background-color: rgba(8,132,255, .6);
              position: absolute; left: 0; top: 25%;
            }
          }
        }
      }
    }
  }
</style>
